﻿@page "/chart/step-area"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart'>Blazor Step Area Chart</a> example visualizes the data about electricity production by using renewable and non-renewable resources by using default step area series in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure a step area type chart. This series forms the step line progress by connecting points through the vertical and horizontal lines with the area being filled.</p>
    <p>More information about the step area series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/step-area'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Electricity - Production" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Production (Billion as kWh)" LabelFormat="{value}B">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Renewable" XName="Period" Width="2"
                         YName="RenewableResourcesProduction" Type="ChartSeriesType.StepArea">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Non-Renewable" XName="Period" Width="2"
                         YName="NonRenewableResourcesProduction" Type="ChartSeriesType.StepArea">
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<StepAreaChartData> ChartPoints = new List<StepAreaChartData>
    {
        new StepAreaChartData { Period = 2000, RenewableResourcesProduction = 416, NonRenewableResourcesProduction = 180 },
        new StepAreaChartData { Period = 2001, RenewableResourcesProduction = 490, NonRenewableResourcesProduction = 240 },
        new StepAreaChartData { Period = 2002, RenewableResourcesProduction = 470, NonRenewableResourcesProduction = 370 },
        new StepAreaChartData { Period = 2003, RenewableResourcesProduction = 500, NonRenewableResourcesProduction = 200 },
        new StepAreaChartData { Period = 2004, RenewableResourcesProduction = 449, NonRenewableResourcesProduction = 229 },
        new StepAreaChartData { Period = 2005, RenewableResourcesProduction = 470, NonRenewableResourcesProduction = 210 },
        new StepAreaChartData { Period = 2006, RenewableResourcesProduction = 437, NonRenewableResourcesProduction = 337 },
        new StepAreaChartData { Period = 2007, RenewableResourcesProduction = 458, NonRenewableResourcesProduction = 258 },
        new StepAreaChartData { Period = 2008, RenewableResourcesProduction = 500, NonRenewableResourcesProduction = 300 },
        new StepAreaChartData { Period = 2009, RenewableResourcesProduction = 473, NonRenewableResourcesProduction = 173 },
        new StepAreaChartData { Period = 2010, RenewableResourcesProduction = 520, NonRenewableResourcesProduction = 220 },
        new StepAreaChartData { Period = 2011, RenewableResourcesProduction = 509, NonRenewableResourcesProduction = 309 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class StepAreaChartData
    {
        public double Period { get; set; }
        public double RenewableResourcesProduction { get; set; }
        public double NonRenewableResourcesProduction { get; set; }
    }
}
